Our strategy for Editing and deleting on forms heavily leverages JQuery to make posts to a containing div within the containing page.

Each 'screen' (this could be loaded into a div) consists of a 'create' screen and and a list of the existing records.

We can leverage the 'create' that is built as part of the MVC scaffolding.

With MVC a 'create' page has every column in the table defined with a specific HTML id.

The exception is we need to add the id column as a hidden field.

We add the following javascript to the master page:

<script type="text/javascript">
 
    function CreateNewRecord() {
        if($("#id").val() == ""){
           $("#id").val("0");
        }
        if ($("#LicenseCreateForm").validate().form()) {
            $.post("License/Create",
            $("#LicenseCreateForm").serialize(),
            function (data) {
 
                //$("#profiledisplay").html("<div class='profileSpacer'></div>").load("License/ProfileLicense")
                $("#profiledisplay").load("License/ProfileLicense")
                //$("#NoteListBlock").html(data);
            });
        }
    }
 
    function DeleteRow(id) {
 
      var conf = confirm("Are You Sure?");
 
      if (conf) {
 
           $("#profiledisplay").load("License/DeleteConfirmed/" + id )
       }
    }
 
    function EditRow(row) {
 
        $("#id").val($("#r-" + row).find(".td-id").html().trim());
        $("#state").val($("#r-" + row).find(".td-state").html().trim());
        $("#licenseNumber").val($("#r-" + row).find(".td-licenseNumber").html().trim());
        $("#createButton").val("Edit");
 
    }
 
 
</script>

We add the 'create' section (the create works for both edit and create):

   @{
 
        Html.RenderAction("Create", "License");
 
    }

We then modify the 'list' code that is created by MVC

1. Add some razor code in the create markup in the first div @Html.HiddenFor(model => model.id)
2. Add a hidden TD the has the id
3. Add a counter and use it to build an id for the row
4. Remove the existing edit,delete 'buttons' and add code as in code sample
5. Add a class with the pattern of 'td-' and the column name.
6. Modify the EditRow function to move all the fields into the create / edit part of the screen.
7. Add an id of id="createButton" to the button on the Create screen.
8. Take the [HTTP Post] attribute off the DeleteConfirmed method in the controller.
9. Change the redirect at the end of the DeleteConfirmed method to return the Crud page that we are building.

 @{
        if (Model != null)
        {
            int row = 0;
 
            foreach (var item in Model)
            {
 
                   <tr id="r-@row">
                   <td class="td-id" style="display:none; visibility:hidden;">
                    @item.id
                   </td>
                    <td class="td-state">
 
                        @Html.DisplayFor(modelItem => item.state)
                    </td>
                    <td class="td-licenseNumber">
                        @Html.DisplayFor(modelItem => item.licenseNumber)
                    </td>
                    <td>
                        <div class="fl"><input type="button" value="Edit" onclick="EditRow(@row)" /></div>
                        <div><input type="button" value="Delete" onclick="DeleteRow(@item.id)" /></div>
                    </td>
                </tr>
                row++;
            }
 
        }
    }

Add the following code to the Create method on the controller (subsituting the necessary code)

if (license.id > 0)
                {
                    db.Entry(license).State = EntityState.Modified;
                    db.SaveChanges();
 
                }
                else
                {
 
... rest of code
}

For selects (drop downs)

(see notes in Code First to get the drop down intital pattern built)

Make sure you add the select data to the DataBag on all your trips to the controller

To get the edit to work with the drop down

1. add a separate hidden field to the list table

 <td class="td-position_id" style="display: none; visibility: hidden;">
                  @item.position.id
                </td>

2. then add this code in the edit section.

$("#PositionId option").eq($("#r-" + row).find(".td-position_id").html().trim()).attr('selected', 'selected');

PositionId wil will be the name of the select where id is the name of the id field in the table used for the the drop down info ( in this case the postion table).